<template>
  <div class="login-wrap">
    <div class="login-container">
      <h3 class="title">科研项目管理系统</h3>
      <el-form autocomplete="off" label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm"
        label-width="60px" class="demo-ruleForm">
        <el-form-item prop="code" label="工号" ref="item_1">
          <el-input autofocus type="text" @focus="focusClear('item_1')" v-model.trim="ruleForm.code" auto-complete="off"
            placeholder="请输入工号"><img slot="prefix" src="../assets/img/user.png" /></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码" ref="item_2">
          <el-input type="password" @focus="focusClear('item_2')" v-model.trim="ruleForm.password" auto-complete="off"
            placeholder="请输入密码"><img slot="prefix" src="../assets/img/password.png" /></el-input>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')" :loading="logining">登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {
    Apilogin,
    ApimenusUser,
    Apihospitalinfo
  } from '@/api'
  import {
    initDynamicRoutes
  } from '@/router/index'
  import {
    debounce
  } from '@/utils'
  import {
    mapMutations
  } from "vuex";
  import {
    uploadUrl
  } from '@/api/request'
  import {
    permissionFn
  } from '@/utils/directive'
  const arr = {
    icon: "icon-pingshenqueren",
    id: 100,
    navigation: 1,
    route: "review",
    title:'评审管理',
    sub_menus:[{
      id: 101,
      navigation: 1,
      route: "review/expert",
      title:'专家库',
    },{
      id: 102,
      navigation: 1,
      route: "review/committee",
      title:'专家委员会',
    },{
      id: 103,
      navigation: 1,
      route: "review/scheme",
      title:'评分方案',
    },{
      id: 104,
      navigation: 1,
      route: "review/myProject",
      title:'我的项目',
    },{
      id: 105,
      navigation: 1,
      route: "review/reviewList",
      title:'评审列表',
    }]
  }
  export default {
    name: 'login',
    data() {
      return {
        //定义loading默认为false
        logining: false,
        ruleForm: {
          //code和password默认为空
          code: '',
          password: '',
        },
        //rules前端验证
        rules: {
          code: [{
              required: true,
              message: '请输入工号',
              trigger: 'blur'
            },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
            // { pattern: /[A-Za-z0-9\u4e00-\u9fa5]+$/g, message: '不允许输入空格等特殊符号' }
          ],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
        }
      }
    },
    mounted() {
      document.onkeydown = (e) => {
        let theEvent = window.event || e;
        let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
          this.submitForm('ruleForm')
        }
      }
    },
    destroyed() {
      document.onkeydown = null
    },
    methods: {
      ...mapMutations(['setLogo']),
      focusClear(ele) {
        this.$refs[ele].clearValidate()
      },
      getMenuInfo() { //获取侧边栏列表
        ApimenusUser().then(result => {
          if (result.data.length === 0) {
            this.logining = false
            this.$message.error('权限受限，请联系管理员！')
            return
          }
          result.data[2].sub_menus.push({
            id: 178,
            navigation: 1,
            route: "project/recordProject",
            title:'备案项目',
          })
          // result.data[3].sub_menus.push({
          //   id: 198,
          //   navigation: 1,
          //   route: "funds/expenses",
          //   title:'报销经费',
          // })
          result.data.splice(6,0,arr)
          console.log(result.data)
          this.$store.commit('setRightList', result.data)
          this.logining = false
          this.$message.success('登录成功！')
          initDynamicRoutes()
          permissionFn()
          this.$router.push({
            path: '/home'
          })
        }).catch((err) => {
          console.log('err',err)
          this.logining = false
        })
      },
      //获取info列表
      submitForm(formName) {
        if (this.logining) return
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.logining = true
            // 测试通道，不为空直接登录
            Apilogin(this.ruleForm).then(res => {
              if (res.code == 200) {
                this.$store.commit('setUserInfo', res.data.employee)
                let url = ''
                if (res.data.employee.hospital_logo) url = uploadUrl() + res.data.employee.hospital_logo
                this.setLogo(url)
                sessionStorage.setItem('token', 'Bearer ' + res.data.token)
                this.getMenuInfo()
              }
            }).catch(() => {
              this.logining = false
            })
          } else {
            this.$message.error('请输入工号和密码！')
            this.logining = false
            return false
          }
        })
      },
    }
  }
</script>

<style scoped lang='less'>
  .login-wrap {
    box-sizing: border-box;
    min-width: 100%;
    min-height: 100%;
    padding-top: 8%;
    background-image: url('../assets/img/loginBg.png');
    background-repeat: no-repeat;
    // background-position: center right;
    background-size: 100% 100%;

  }

  .login-container {
    margin: 0px auto;
    width: 584px;
    background: #fff;
    box-sizing: border-box;
    border: 6px solid rgb(106, 167, 213);
    // padding: 30px 35px 15px 15px;
    // border: 1px solid #eaeaea;
    // text-align: left;
    // box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  }

  .title {
    height: 105px;
    font-size: 30px;
    color: #436e90;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e5e5e5;
  }

  .demo-ruleForm {
    padding: 64px 64px 14px 60px;
    box-sizing: border-box;

    /deep/.el-input__inner {
      // width: 450px;
      height: 60px;
      padding: 0 60px;
      font-size: 20px;
    }

    /deep/.el-form-item__label {
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      color: #737373;
    }

    /deep/.el-form-item {
      margin-bottom: 50px;
    }

    /deep/.el-button {
      height: 60px;
      background: #3f7099;
      font-size: 24px;
    }

    /deep/.el-input__prefix {
      display: flex;
      align-items: center;
      padding: 0 20px;
    }

    /deep/.el-form-item__error {
      font-size: 18px;
    }
  }

  /deep/.el-form-item__label::before {
    content: '' !important;
  }
</style>